---
title: Accordions
description: Free responsive accordion components built with Tailwind CSS v4. Collapsible content sections for organizing information, forms, settings, and hierarchical data with customizable animations and styling.
category: application
emoji: 🎯
slug: accordions
tag: new
terms:
  - collapse
  - expand
components:
  - { title: 'Base', dark: true }
  - { title: 'With icons', dark: true }
  - { title: 'Divided', dark: true }
  - { title: 'Nested', dark: true }
  - { title: 'Compact', dark: true }
---

import CollectionHeader from '../../../components/CollectionHeader.astro'

<CollectionHeader>
  # Accordion Components

  <p>{frontmatter.description}</p>
</CollectionHeader>
